<script setup>
import { onMounted, ref } from 'vue'
import DangerNoticeForm from './DangerNoticeForm.vue'
import { useDict } from '@/hooks/useDict'
const { getDictStyle, getDictValue } = useDict()
const props = defineProps({
  taskType: {
    type: String,
    default: '',
  },
  templeteContent: {
    type: String,
    default: '',
  },
  tableData: {
    type: Array,
    default: () => [],
  },
})

const signatureFileUrl = ref('')
const dialogVisible = ref(false)
const handleNoticeDetail = (row) => {
  dialogVisible.value = true
  if (row.signaturefiles && row.signaturefiles.length > 0) {
    signatureFileUrl.value = row.signaturefiles[0].fileUrl
  }
}
onMounted(() => {})
</script>

<template>
  <div class="inspection-info">
    <el-table
      class="custom-table"
      :data="tableData"
      :default-expand-all="true"
      row-key="id"
    >
      <el-table-column prop="deptName" label="单位" />
      <el-table-column prop="userName" label="人员" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-text :type="getDictStyle('is_read', scope.row.status)">{{
            getDictValue('is_read', scope.row.status)
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column label="手写签名">
        <template #default="scope">
          <el-image
            class="table-img"
            fit="cover"
            v-for="(item, index) in scope.row.signaturefiles"
            :key="index"
            :initial-index="index"
            :preview-src-list="
              scope.row.signaturefiles.map((i) => {
                return i.fileUrl
              })
            "
            preview-teleported
            :src="item.fileUrl"
          />
        </template>
      </el-table-column>
      <el-table-column label="附件照片">
        <template #default="scope">
          <el-image
            class="table-img"
            fit="cover"
            v-for="(item, index) in scope.row.feedBackfiles"
            :key="index"
            :initial-index="index"
            :preview-src-list="
              scope.row.feedBackfiles.map((i) => {
                return i.fileUrl
              })
            "
            preview-teleported
            :src="item.fileUrl"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160px" v-if="props.taskType === '1'">
        <template #default="scope">
          <el-button link type="primary" @click="handleNoticeDetail(scope.row)"
            >公告查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      class="custom-dialog"
      v-model="dialogVisible"
      title="公告查看"
      width="600px"
    >
      <DangerNoticeForm
        v-if="dialogVisible"
        :readonly="true"
        :detail="templeteContent"
        :signatureFileUrl="signatureFileUrl"
      />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss" src="@/assets/styles/table.scss"></style>
<style scoped lang="scss">
.inspection-info {
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    align-self: center;
  }

  .el-table {
    .status {
      color: red;

      &.read {
        color: green;
      }
    }

    .table-img {
      width: 60px;
      height: 60px;
    }
  }
}
</style>
